<template lang='pug'>
  .page
    .mr-20.mb-20
      p 省市区选择
      .clearfix
        Select.w120.mr-10(v-model="result.province" @on-change="getCity(result.province)")
          Option(v-for="item in provinceList" :value="item.id" :key="item.id") {{ item.name }}
        Select.w120.mr-10(v-model="result.city" @on-change="getArea(result.city)")
          Option(v-for="item in cityList" :value="item.id" :key="item.id") {{ item.name }}
        Select.w120.mr-10(v-model="result.area")
          Option(v-for="item in areaList" :value="item.id" :key="item.id") {{ item.name }}
</template>

<script>
import { SysAreaApi } from '@/api/SysArea.api.js'
import dataApi from '@/api/data.js'
import { Common } from '@/utils/common.js'
export default {
  data () {
    return {
      provinceList: null,
      cityList: null,
      areaList: null,
      result: {
        province: null,
        city: null,
        area: null
      }
    }
  },

  mounted () {
    this.getProvince()
  },

  methods: {
    // 获取所有省份
    async getProvince () {
      let resp = await SysAreaApi.getProvince()
      if (resp.status === 200) {
        this.provinceList = resp.data.data
      }
    },

    // 获取目标省份下的所有城市
    async getCity (provinceId) {
      let resp = await SysAreaApi.getCity(provinceId)
      if (resp.status === 200) {
        this.cityList = resp.data.data
        this.result.city = resp.data.data[0].id
        this.getArea(this.result.city)
      }
    },

    // 获取目标城市下的所有区县
    async getArea (cityId) {
      let resp = await SysAreaApi.getArea(cityId)
      if (resp.status === 200) {
        this.areaList = resp.data.data
        this.result.area = resp.data.data[0].id
        console.log('所选择的省市区：', this.result)
      }
    }
  }
}
</script>

<style>

</style>
